<template>
  <view class="main">
    <z-paging
      auto-show-back-to-top
      ref="paging"
      v-model="accountLogList"
      @query="queryList"
      :fixed="false"
      height="100%"
    >
      <!-- 订单卡片 -->
      <view class="list">
        <view
          v-for="(item, index) in accountLogList"
          :key="index"
          class="item bg-white"
        >
          <view>
            <view class="flex justify-between text-lg">
              <view class="normal mb-[10rpx]">{{
                item.action || "余额充值"
              }}</view>

              <view class="normal">{{ item?.amount || "500" }}</view>
            </view>
            <view class="text-xs text-muted">{{
              item.updateTime || "2022-04-25 00:19:07"
            }}</view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script lang="ts" setup>
import { ref, shallowRef, nextTick } from "vue";
import { apiAccountLogLists } from "@/api/user";

/** Props Start **/
const props = withDefaults(
  defineProps<{
    type?: any;
    i: number;
    index: number;
  }>(),
  {
    type: 1,
    i: 0,
    index: 0,
  }
);
/** Props End **/

/** Data Start **/
const accountLogList: any = ref({});
// 下拉组件的Ref
const paging = shallowRef();
/** Data End **/

const queryList = async (pageNo: any, pageSize: any) => {
  try {
    const { lists } = await apiAccountLogLists({
      pageNo,
      pageSize,
      action: props.type.type,
    });
    paging.value.complete(lists);
  } catch (e) {
    console.log("下拉加载", e);
    paging.value.complete(false);
  }
};
</script>

<style lang="scss" scoped>
.main {
  height: calc(100vh - 200px - env(safe-area-inset-bottom));
  padding-top: 20rpx;

  .list {
    .item {
      padding: 20rpx 30rpx;
      &:not(:last-of-type) {
        border-bottom: 1rpx solid $color-border-light;
      }
    }
  }
}
</style>
